<!DOCTYPE html>
<html>
<head>
	<title>商品列表</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="application/x-javascript"> 
		addEventListener("load", function() { 
			setTimeout(hideURLbar, 0); }, false);
			function hideURLbar(){ window.scrollTo(0,1); 
			} 
	</script>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<script src="js/jquery.min.js"></script>
	<script src="js/simpleCart.min.js"> </script>
	<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
	<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
	<link href="css/animate.min.css" rel="stylesheet"> 
	<script src="js/wow.min.js"></script>
	<script>
	 new WOW().init();
	</script>
	<style type="text/css">
			.nav{
				width: 100%;
				height: 50px;
				background:url("./images/repeat.png") repeat-x 0px 0px}/*宽度、高度、背景*/
			.nav ul li{
				width: 100px; 
				float: left; /*左边浮动*/
				line-height: 50px; /*行高*/
				margin-left: 40px;/*左侧距离*/
			}
			.nav ul li a{
				color: #fff;
				text-decoration: none;/*下划线*/
				line-height: 50px;
				font-size: 18px;
				font-weight: bold; /*字体加粗*/
				text-align: center;/*居中*/
				width: 100px;
				height: 50px;
				display:block; /*块状显示*/
			}
			.nav ul li a:hover{
				color: blue;
				background-color: #fff;/*背景颜色*/
			}
	</style>
</head>
	
<body>
	<!-- 头部开始 -->
	<div class="header">
		<div class="container">
			<div class="logo-nav">
				<div class="logo-nav-left1">				
					
					<!-- 导航栏开始 --> 
					<div class="nav">
						<ul>
							<li><a href="#">首页</a></li>
							<li><a href="#">商品展示</a></li>
							<li><a href="#">站内新闻</a></li>
							<li><a href="#">在线答疑</a></li>
							<li><a href="#">联系我们</a></li>
							<li><a href="#">在线帮助</a></li>
						</ul>
					</div>
					
				</div>				
				<!-- 导航栏结束 -->

				<!-- 购物车开始 -->
				<div class="header-right">
					<div class="cart box_1">
						<a href="#">
							<h3> <div class="total">
								 ¥0.00（<span id="simpleCart_quantity" class="simpleCart_quantity">0</span> 件物品）</div>
								<img src="images/bag.png" alt="">
							</h3>
						</a>
						<p><a href="javascript:;" class="simpleCart_empty">购物车</a></p>
						<div class="clearfix"> </div>
					</div>	
				</div>
				<!-- 购物车结束 -->
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- 头部结束 -->
	<!-- 位置导航开始 -->
	<div class="breadcrumbs">
		<div class="container">
			<ol class="breadcrumb breadcrumb1 animated wow slideInLeft" data-wow-delay=".5s">
				<li><span class="glyphicon glyphicon-home" aria-hidden="true"></span>商城首页</li>
				<li class="active">商品列表</li>
			</ol>
		</div>
	</div>
	<!-- 位置导航结束 -->
	<!-- 商品列表开始 -->
	<div class="products" style="background: #FFF;">
		<div class="container">
			<!-- 左侧栏开始 -->
			<div class="col-md-4 products-left" style="margin-top:-48px;">
				<!-- 目录开始 -->
				<div class="categories animated wow slideInUp" data-wow-delay=".5s">
					<h3>商品目录</h3>
					<ul class="cate">
						<li>热卖商品 <span>(10)</span></li>
						<li>>数码/手机 <span>(18)</span></li>
							<ul>
								<li>手机配件<span>(20)</span></li>
								<li>运营商<span>(15)</span></li>
								<li>摄影设备<span>(18)</span></li>
								<li>数码配件<span>(7)</span></li>
								<li>影音娱乐<span>(12)</span></li>
								<li>智能设备<span>(10)</span></li>
							</ul>
						<li>软件/网络设 <span>(23)</span></li>
						<li>电脑/办公<span>(24)</span></li>
							<ul>
								<li>台式机<span>(12)</span></li>
								<li>笔记本/超级本<span>(15)</span></li>
								<li>电脑配件<<span>(4)</span></li>
								<li>外设<span>(10)</span></li>
								<li>办公设备<span>(2)</span></li>
							</ul>
					</ul>
				</div>
				<!-- 目录结束 -->
				<!-- 新货列表开始 -->
				<div class="new-products animated wow slideInUp" data-wow-delay=".5s">
					<h3>新货上架</h3>
					<!-- 从上至下共三块 -->
					<div class="new-products-grids">
						<!-- 1开始 -->
						<div class="new-products-grid">
							<div class="new-products-grid-left">
								<img src="images/6.jpg" alt=" " class="img-responsive" />
							</div>
							<div class="new-products-grid-right">
								<h4>魅族 EP2X耳机</h4>								
								<div class="simpleCart_shelfItem new-products-grid-right-add-cart">
									<p> <span class="item_price">¥399</span><a class="item_add" href="#">添加到购物车 </a></p>
								</div>
							</div>
							<div class="clearfix"> </div>
						</div>
						<!-- 1结束 -->
						<!-- 2开始 -->
						<div class="new-products-grid">
							<div class="new-products-grid-left">
								<img src="images/9.jpg" alt=" " class="img-responsive" />
							</div>
							<div class="new-products-grid-right">
								<h4>魅族盒子 一键找回遥控器</h4>								
								<div class="simpleCart_shelfItem new-products-grid-right-add-cart">
									<p> <span class="item_price">¥499</span><a class="item_add" href="#">添加到购物车 </a>
									</p>
								</div>
							</div>
							<div class="clearfix"> </div>
						</div>
						<!-- 2结束 -->
						<!-- 3开始 -->
						<div class="new-products-grid">
							<div class="new-products-grid-left">
								<img src="images/11.jpg" alt=" " class="img-responsive" />
							</div>
							<div class="new-products-grid-right">
								<h4>魅蓝 E2</h4>s								
								<div class="simpleCart_shelfItem new-products-grid-right-add-cart">
									<p> <span class="item_price">¥1666</span><a class="item_add" href="#">添加到购物车 </a>
									</p>
								</div>
							</div>
							<div class="clearfix"> </div>
						</div>
						<!-- 3结束 -->
					</div>
				</div>
				<!-- 新货列表结束 -->
				<!-- 左侧栏 -->
				<div class="men-position animated wow slideInUp" data-wow-delay=".5s">
					<img src="images/27.jpg" alt=" " class="img-responsive" />
					<div class="men-position-pos">
						<h4>四月<br>销量排行</h4>
						<h5>台式电脑<span style="font-size: 2em;">7</span>折起</h5>
					</div>
				</div>
			</div>
			<!-- 左侧栏结束 -->
			<!-- 商品列表主体开始 -->
			<div class="col-md-8 products-right">
				<!-- 封面开始 -->
				<div class="products-right-grid">
					<div class="products-right-grids-position animated wow slideInRight" data-wow-delay=".5s">
						<img src="images/18.jpg" alt=" " class="img-responsive" />
						<div class="products-right-grids-position1">
							<h4 style="font-size:2.4em;">旅行，与时间赛跑</h4>
						</div>
					</div>
				</div>
				<!-- 封面结束 -->
				<!-- 详细列表开始 -->
				<div class="products-right-grids-bottom">
					<!-- 从上至下从左至右共九块 -->
					<div class="col-md-4 products-right-grids-bottom-grid">
						<!-- 1开始 -->
						<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp" data-wow-delay=".5s">
							<div class="new-collections-grid1-image">
								<img src="images/10.jpg" alt=" " class="img-responsive">
								<div class="new-collections-grid1-image-pos products-right-grids-pos">
									<h4>查看详情</h4>
								</div>								
							</div>
							<h4><a href="single.html">苏泊尔电热水壶家用自动断电304不锈钢玻璃</a></h4>
							<p>不锈钢上盖 高硼硅玻璃 蓝光烧水体验</p>
							<div class="simpleCart_shelfItem products-right-grid1-add-cart">
								<p><i>¥299</i> <span class="item_price">¥289</span><a class="item_add" href="#">添加到购物车 </a>
								</p>
							</div>
						</div>
						<!-- 1结束 -->
						<!-- 2开始 -->
						<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp" data-wow-delay=".5s">
							<div class="new-collections-grid1-image">
								<img src="images/8.jpg" alt=" " class="img-responsive">
								<div class="new-collections-grid1-image-pos products-right-grids-pos">
									<h4>查看详情</h4>
								</div>								
							</div>
							<h4><a href="single.html">苏泊尔电磁炉家用智能电池炉灶火锅</a></h4>
							<p>旋转触控调温 一键猛火直达 爆炒更给力</p>
							<div class="simpleCart_shelfItem products-right-grid1-add-cart">
								<p><i>¥699</i> <span class="item_price">¥599</span><a class="item_add" href="#">添加到购物车 </a></p>
							</div>
						</div>
						<!-- 2结束 -->
						<!-- 3开始 -->
						<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp" data-wow-delay=".5s">
							<div class="new-collections-grid1-image">
								<img src="images/24.jpg" alt=" " class="img-responsive">
								<div class="new-collections-grid1-image-pos products-right-grids-pos">
									<h4>查看详情</h4>
								</div>								
							</div>
							<h4>苏泊尔SW-17T58A不锈钢保温电水壶</h4>
							<p>英国进口温控器 一体化内胆 304不锈钢材质</p>
							<div class="simpleCart_shelfItem products-right-grid1-add-cart">
								<p><i>¥199</i> <span class="item_price">¥99</span><a class="item_add" href="#">添加到购物车 </a></p>
							</div>
						</div>
					</div>
					<!-- 3结束 -->
					<!-- 4开始 -->
					<div class="col-md-4 products-right-grids-bottom-grid">
						<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp" data-wow-delay=".5s">
							<div class="new-collections-grid1-image">
								<img src="images/7.jpg" alt=" " class="img-responsive">
								<div class="new-collections-grid1-image-pos products-right-grids-pos">
									<h4>查看详情</h4>
								</div>								
							</div>
							<h4>苏泊尔JD30R845电饼铛</h4>
							<p>可拆易清洗 20mm深烤盘 智能感温防烫</p>
							<div class="simpleCart_shelfItem products-right-grid1-add-cart">
								<p><i>¥599</i> <span class="item_price">¥499</span><a class="item_add" href="#">添加到购物车 </a></p>
							</div>
						</div>
						<!-- 4结束 -->
						<!-- 5开始 -->
						<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp" data-wow-delay=".5s">
							<div class="new-collections-grid1-image">
								<img src="images/22.jpg" alt=" " class="img-responsive">
								<div class="new-collections-grid1-image-pos products-right-grids-pos">
									<h4>查看详情</h4>
								</div>								
							</div>
							<h4>魅蓝可变形颈枕酷MA萌定制版</h4>
							<p>超柔面料，玩用两不误</p>
							<div class="simpleCart_shelfItem products-right-grid1-add-cart">
								<p><i>¥199</i> <span class="item_price">¥99</span><a class="item_add" href="#">添加到购物车 </a>
								</p>
							</div>
						</div>
						<!-- 5结束 -->
						<!-- 6开始 -->
						<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp" data-wow-delay=".5s">
							<div class="new-collections-grid1-image">
								<img src="images/25.jpg" alt=" " class="img-responsive">
								<div class="new-collections-grid1-image-pos products-right-grids-pos">
									<h4>查看详情</h4>
								</div>								
							</div>
							<h4>魅蓝20寸旅行箱 酷MA萌定制版</h4>
							<p>静音双排万向轮设计，具备安全TSA海关锁</p>
							<div class="simpleCart_shelfItem products-right-grid1-add-cart">
								<p><i>¥499</i> <span class="item_price">¥399</span><a class="item_add" href="#">添加到购物车 </a>
								</p>
							</div>
						</div>
					</div>
					<!-- 6结束 -->
					<!-- 7开始 -->
					<div class="col-md-4 products-right-grids-bottom-grid">
						<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp" data-wow-delay=".5s">
							<div class="new-collections-grid1-image">
								<img src="images/20.jpg" alt=" " class="img-responsive">
								<div class="new-collections-grid1-image-pos products-right-grids-pos">
									<h4>查看详情</h4>
								</div>								
							</div>
							<h4>谷的家宝石储物盒</h4>
							<p>PLA材质，储物分类，方便实用。</p>
							<div class="simpleCart_shelfItem products-right-grid1-add-cart">
								<p><i>¥189</i> <span class="item_price">¥109</span><a class="item_add" href="#">添加到购物车 </a>
								</p>
							</div>
						</div>
						<!-- 7结束 -->
						<!-- 8开始 -->
						<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp" data-wow-delay=".5s">
							<div class="new-collections-grid1-image">
								<img src="images/23.jpg" alt=" " class="img-responsive">
								<div class="new-collections-grid1-image-pos products-right-grids-pos">
									<h4>查看详情</h4>
								</div>								
							</div>
							<h4>金士顿32GB金属U盘</h4>
							<p>DT SE9H 迷你型 银色亮薄</p>
							<div class="simpleCart_shelfItem products-right-grid1-add-cart">
								<p><i>¥65</i> <span class="item_price">¥35</span><a class="item_add" href="#">添加到购物车 </a>
								</p>
							</div>
						</div>
						<!-- 8结束 -->
						<!-- 9开始 -->
						<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp" data-wow-delay=".5s">
							<div class="new-collections-grid1-image">
								<img src="images/26.jpg" alt=" " class="img-responsive">
								<div class="new-collections-grid1-image-pos products-right-grids-pos">
									<h4>查看详情</h4>
								</div>
								
							</div>
							<h4>扬子USB静音迷你多功能台夹扇</h4>
							<p>多功能USB 一扇五用 风大音轻</p>
							<div class="simpleCart_shelfItem products-right-grid1-add-cart">
								<p><i>¥599</i> <span class="item_price">¥499</span><a class="item_add" href="#">添加到购物车 </a></p>
							</div>
						</div>
					</div>
					<!-- 9结束 -->
					<div class="clearfix"> </div>
				</div>
				<!-- 选页框 -->
				<nav class="numbering animated wow slideInRight" data-wow-delay=".5s">
				  	<ul class="pagination pagination-lg">
						<li class="disabled"><a href="#"><i class="fa fa-angle-left"><<</i></a></li>
						<li class="active"><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">5</a></li>
						<li><a href="#"><i class="fa fa-angle-right">>></i></a></li>
					</ul>
				</nav>
				<!-- 选页框结束 -->
				<!-- 详细列表结束 -->
			</div>
			<!-- 商品列表主体结束 -->
			<div class="clearfix"> </div>
		</div>
	</div>
	<!-- 商品列表结束 -->
	<!-- 页脚开始 -->	
	<div class="col-md-12 marginTop10 pageFooter">
		<div class="copyright">
			©2018 Meizu Telecom Equipment Co., Ltd. All rights reserved.  粤ICP备13003602号 合字B2-20170010 Powered by zlf		
		</div>
	</div>
	<!-- 页脚结束 -->	

</body>
</html>